<template>
  <header class="header">
    <h1>todos</h1>
    <!-- v-model关联全选状态
    页面变化(勾选true, 未勾选false) -> v-model -> isAll变量 -->
    <input v-model="isAll" id="toggle-all" class="toggle-all" type="checkbox" />
    <label for="toggle-all"></label>
    <!-- 3.0 键盘事件-回车按键
         3.1 输入框 - v-model获取值
     -->
    <input
      @keydown.enter="enterDown"
      v-model.trim="taskName"
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
    />
  </header>
</template>

<script>
export default {
  props: ["list"],
  // 新增任务
  data() {
    return {
      taskName: "",
    };
  },
  methods: {
    enterDown() {
      if (this.taskName.length === 0) return alert("不能为空");
      // 通过子传父技术将 taskName 传递给App.vue
      //使用 this.$emit('事件名','数据')
      this.$emit("addtask", this.taskName);
      //   清空文本框
      this.taskName = "";
    },
  },
  //   定义计算属性
  computed: {
    isAll: {
      set(val) {
        //只有true/false
        // console.log(val);
        // 单向数据流是指: 不能直接对 props 中的数据进行赋值操作
        // list 是引用数据类型 所以修改内部属性不会影响单向数据流的保护
        // this.list = []  不可以这样
        // this.list[0].isDone = false 可以的
        this.list.forEach((item) => (item.isDone = val));
      },
      get() {
        //   小选框统计状态 -> 全选框
        //  如果没有数据, 直接返回false-不要让全选勾选状态
        if (this.list.length === 0) return false;
        return this.list.every((item) => item.isDone);
      },
    },
  },
};
</script>